<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">
        <ui:define name="body">

            <h:form id="form" enctype="multipart/form-data">
                <p:panel styleClass="withoutBorder" rendered="#{!managerLayout.desabilitarMapa() and managerEditarFaceQuadra.connect}">
                    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" />
                </p:panel>

                <h3 class="title">Visualizar Faces de Quadra</h3>

                <p:panel id="dadosGeraisPanel" styleClass="container_24 clearfix withoutBorder">
                    <h4 class="title">Dados Gerais</h4>

                    <p:outputLabel value="Setor" styleClass="grid_3" for="setor" />
                    <p:inputText id="setor" styleClass="grid_8" readonly="true"
                                 value="#{managerEditarFaceQuadra.setor.numero}"/>

                    <p:outputLabel value="Quadra" styleClass="grid_3" for="quadra"/>
                    <p:inputText id="quadra" styleClass="grid_8" readonly="true"
                                 value="#{managerEditarFaceQuadra.faceQuadra.quadra.numero}" />
                </p:panel>

                <p:panel id="faceQuadraPanel" styleClass="container_24 clearfix withoutBorder">
                    <h4 class="title">Face de Quadra</h4>

                    <p:outputLabel value="Bairro" styleClass="grid_3" for="bairro"/>
                    <p:inputText id="bairro" styleClass="grid_20" readonly="true"
                                 value="#{managerEditarFaceQuadra.bairro.nome}"/>
                    <div class="clear"/>
                </p:panel>

                <p:panel id="faceQuadrasPanel" styleClass="container_24 clearfix withoutBorder">
                    <p:dataTable id="faceQuadrasDataTable" var="item" value="#{managerEditarFaceQuadra.faceQuadras}"
                                 styleClass="grid_24" rowIndexVar="rowid" style="white-space: pre-wrap;" 
                                 rows="5" paginator="true" lazy="true"
                                 paginatorTemplate="{FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
                                 currentPageReportTemplate="{currentPage} de {totalPages}"
                                 paginatorPosition="bottom" emptyMessage="Nenhum registro">

                        <f:facet name="header">
                            <p:outputLabel value="Faces de Quadra #{managerEditarFaceQuadra.faceQuadras.size() eq 0 ? '' : '('.concat(managerEditarFaceQuadra.faceQuadras.size()).concat(')')}" />
                        </f:facet>

                        <p:column headerText="UFMP" width="120">
                            <h:outputText value="#{item.valorUfmp}" />
                        </p:column>
                        <p:column headerText="Logradouro">
                            <h:outputText value="#{item.dne.rua}"/>
                        </p:column>
                    </p:dataTable> 
                </p:panel>

                <br/>
                <h4 class="title">Georreferenciamento</h4>

                <p:panel id="map" styleClass="container_24 clearfix withoutBorder">

                    <div class="buttonAction">

                        <p:gmap id="mapa" center="#{managerEditarFaceQuadra.centroMapa}" zoom="#{managerEditarFaceQuadra.zoomLevelMapa}" 
                                rendered="#{!managerLayout.desabilitarMapa() and managerEditarFaceQuadra.connect}" type="HYBRID" 
                                style="width:97%;height:500px" model="#{managerEditarFaceQuadra.mapModel}" >

                            <p:ajax event="stateChange" listener="#{managerEditarFaceQuadra.onStateChange}"/>
                        </p:gmap>

                        <p:outputLabel value="O Georreferenciamento foi desabilitado pois não foi possível estabelecer uma conexão com a Internet !"
                                       rendered="#{!managerLayout.desabilitarMapa() and !managerEditarFaceQuadra.connect}"/>

                        <p:outputLabel value="O Georreferenciamento foi desabilitado pelo administrador do sistema !"
                                       rendered="#{managerLayout.desabilitarMapa()}"/>
                    </div>
                </p:panel>

                <br/>
                <div class="buttonAction">
                    <p:button href="pesquisarfacequadra.xhtml" value="Voltar" 
                              icon="ui-icon-arrowreturnthick-1-w"/>
                </div >
            </h:form>

        </ui:define>

    </ui:composition>

</html>
